<div class="comment">
  <div class="flex-nowrap-center">
    <ngx-avatar [name]="comment.userName" [src]="comment.photo ? 'data:image/jpg;base64,' + comment.photo : ''"></ngx-avatar>
  </div>
  <div class="ml-10">
    <div class="flex-nowrap comment-user-name">
      <div class="fill-space"><b>
        {{comment.userName}}</b> <small class="ml-10">{{comment.date | dateFormat | async}}</small>
      </div>

      <div *ngIf="!isEditingComment && isOwnerOfNote$ | async">
        <button mat-icon-button class="icon-spacer" matTooltip="{{'comment-card.tooltip.edit-comment' | translate}}" (click)="clickedEditComment()">
          <mat-icon>edit</mat-icon>
        </button>

        <button mat-icon-button class="icon-spacer" matTooltip="{{'comment-card.tooltip.delete-comment' | translate}}" (click)="clickedDeleteComment()">
          <mat-icon>delete</mat-icon>
        </button>
      </div>
      <div *ngIf="isEditingComment && isOwnerOfNote$ | async">
        <button mat-icon-button class="icon-spacer" matTooltip="{{'comment-card.tooltip.save-comment' | translate}}" (click)="clickedSaveComment()" [disabled]="isSavingEdit || this.editedCommentText.length < 3 || this.editedCommentText.length > 255">
          <mat-icon>save</mat-icon>
        </button>
        <button mat-icon-button class="icon-spacer" matTooltip="{{'comment-card.tooltip.cancel' | translate}}" (click)="clickedCancelEditComment()" [disabled]="isSavingEdit">
          <mat-icon>cancel</mat-icon>
        </button>
      </div>

    </div>
    <div *ngIf="!isEditingComment" class="comment-text">
      {{comment.text}}
    </div>
    <div *ngIf="isEditingComment">
      <div class="flex-nowrap">
        <mat-form-field class="full-width">
        <textarea matInput cdkTextareaAutosize placeholder="{{'comment-card.edit-comment' | translate}}" [disabled]="isSavingEdit" [(ngModel)]="editedCommentText"></textarea>
        </mat-form-field>
      </div>
    </div>
  </div>

</div>
